<template>
	<view class="card-container">
		<view v-for="(item, index) in addData" :key="index" class="card">
			<view class="card-number_t">
				<text class="number-text">{{ index + 1 }}</text>
			</view>
			<view class="card-content">
				<text class="content-title">{{ item.owner }}</text>
				<text class="content-subtitle">{{ item.foot_ring_number }}</text>
			</view>
			<image src="/static/images/删除.png" class="delete-icon" @click="confirmDelete(index)">
			</image>
		</view>
	</view>
	<view class="btn-container">
		<button class="generate-btn" @tap="generatePairs" hover-class="btn-hover">
			生成组合
		</button>
		<button class="confirm-btn" @tap="confirmSelection" hover-class="btn-hover">
			确定发布
		</button>
	</view>
	<view class="card-container">
		<view v-for="(item, index) in pairs" :key="index" class="card">
			<view class="card-number_b">
				<text class="number-text">{{ index + 1 }}</text>
			</view>
			<view class="card-content">
				<text class="content-title">{{ item.owner_a }}-[{{ item.foot_ring_number_a }}]</text>
				<text class="content-title">{{ item.owner_b }}-[{{ item.foot_ring_number_b }}]</text>
			</view>
			<image src="/static/images/删除.png" class="delete-icon" @click="combinationDelete(index)">
			</image>
		</view>
	</view>
</template>

<script>
export default {
	name: "Two_Feather_Pass",
	props: {
		addData: {
			type: Array,
			default: () => []
		},
	},
	data() {
		return {
			pairs: [],
		};
	},
	methods: {
		// 确认发布事件
		async confirmSelection() {
			try {
				// 为每个数据对象追加姓名字段
				const {
					confirm,
					cancel,
					content: designatedPerson
				} = await uni.showModal({
					title: '请输入指定人',
					editable: true,
					placeholder: '请输入指定人姓名',
					confirmText: '确认',
					cancelText: '取消'
				});

				if (!confirm || !designatedPerson) {
					if (!confirm) return;
					uni.showToast({
						title: '必须输入指定人',
						icon: 'none'
					});
					return;
				}
				this.pairs = this.pairs.map(item => ({
					...item,
					designated_person: designatedPerson
				}));
				// 调用crudOperations云对象批量添加数据
				const res = await uniCloud.importObject('crudOperations').batchAdd('Two_Feather_Data', this
					.pairs);
				if (res && res.success) {
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					});
					this.pairs = []; // 清空已发布数据
				} else {
					let errorMsg = res.message || '发布失败';
					if (res.data && res.data.duplicateNumbers) {
						errorMsg += `，重复足环号：${res.data.duplicateNumbers.join('、')}`;
					}
					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 5000
					});
				}
			} catch (e) {
				console.error('发布失败:', e);
				uni.showToast({
					title: '发布失败: ' + (e.message || '未知错误'),
					icon: 'none'
				});
			}
		},
		// 确认删除
		confirmDelete(index) {
			const card = this.addData[index];
			uni.showToast({
				title: `已删除${card.owner || '未知用户'}的鸽子`,
				icon: 'success',
				duration: 2000
			});
			this.addData.splice(index, 1);
		},
		// 确认删除组合
		combinationDelete(index) {
			const card = this.addData[index];
			uni.showToast({
				title: `已删除${card.owner || '未知用户'}的鸽子`,
				icon: 'success',
				duration: 2000
			});
			this.pairs.splice(index, 1);
		},
		// 生成配对组合事件
		generatePairs() {
			// 检查数据长度
			if (this.addData.length < 2) {
				uni.showToast({
					title: '数据数量不足，无法生成组合',
					icon: 'none'
				});
				return;
			}
			this.pairs = this.generatePigeonPairs(this.addData);
		},

		// 生成配对组合函数
		generatePigeonPairs(history) {
			const pairs = [];
			for (let i = 0; i < history.length; i++) {
				for (let j = i + 1; j < history.length; j++) {
					const pair = {
						parent1: history[i],
						parent2: history[j],
					}
					console.log(this.mergeWithSuffix(pair.parent1, pair.parent2))
					pairs.push(this.mergeWithSuffix(pair.parent1, pair.parent2));
				}
			}

			return pairs;
		},
		// 合并函数：为字段添加唯一后缀
		mergeWithSuffix(data1, data2, suffix1 = '_a', suffix2 = '_b') {
			const merged = {};

			// 处理第一条数据
			for (const key in data1) {
				merged[key + suffix1] = data1[key];
			}
			// 处理第二条数据
			for (const key in data2) {
				merged[key + suffix2] = data2[key];
			}
			return merged;
		},

	}
}
</script>

<style>
.card-container {
	margin-top: 10px;
	overflow-y: auto;
	padding: 0;
	max-height: 200px;
	margin-left: 20rpx;
	margin-right: 20rpx;
	
}

.card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1px;
	background-color: #f8f9fa;
	border-radius: 10px;
	/* box-shadow: 0 0 10px rgba(0, 102, 255, 0.5); */
	margin: 0 3px 6px 3px;
	border-left: none;
	border-right: none;
	border: 1px solid #0066ff;
	height: auto;
}

.card-number_t {
	width: 40px;
	height: 40px;
	
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 6px;
	margin-right: 6px;
	background-image: url('@/static/images/数字背景蓝.png');
	background-size: cover;
	background-position: center;
	
}
.card-number_b {
	width: 40px;
	height: 40px;
	
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 6px;
	margin-right: 6px;
	background-image: url('@/static/images/数字背景绿.png');
	background-size: cover;
	background-position: center;
	
}

.number-text {
	color: white;
	font-weight: bold;
}

.card-content {
	flex: 1;
	
}

.content-title {
	display: block;
	font-size: 14px;
	color: #333;
}

.content-subtitle {
	display: block;
	font-size: 14px;
	color: #666;
}

.delete-icon {
	width: 25px;
	height: 25px;
	margin-right: 10px;
}

.btn-container {
	display: flex;
	justify-content: space-around;
	margin: 20rpx 0;
}

.generate-btn {
	flex: 1;
	margin: 0 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	background: linear-gradient(to right, #014ed2, #43bdff);
	color: white;
	font-size: 32rpx;
	transition: all 0.3s;
}

.confirm-btn {
	flex: 1;
	margin: 0 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	background: linear-gradient(to right, #4CAF50, #8BC34A);
	color: white;
	font-size: 32rpx;
	transition: all 0.3s;
}
</style>